<template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-btn
      color="secondary"
      icon="refresh"
      label="刷新"
      class="q-ml-sm"
      @click="fetchData"
    />
    <q-list>
      <q-item
        v-for="result in limitedResults"
        :key="result.id"
        v-close-popup
        clickable
      >
        <q-card
          class="my-card"
          flat
          bordered
        >
          <img
            :src="result.image"
            class="my-img"
            @click="openImageViewer(result.image)"
          >

          <q-list>
            <q-item
              clickable
            >
              <q-item-section avatar>
                <!-- <q-icon
                  color="primary"
                  name="local_bar"
                /> -->

                <q-item-label>名称</q-item-label>
              </q-item-section>

              <q-item-section>
                <q-item-label caption>
                  {{ result.name }}
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable>
              <q-item-section avatar>
                <!-- <q-icon
                  color="red"
                  name="local_gas_station"
                /> -->

                <q-item-label>编号</q-item-label>
              </q-item-section>

              <q-item-section>
                <q-item-label caption>
                  {{ result.number }}
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable>
              <q-item-section avatar>
                <!-- <q-icon
                  color="amber"
                  name="local_movies"
                /> -->

                <q-item-label>user</q-item-label>
              </q-item-section>

              <q-item-section>
                <q-item-label caption>
                  {{ result.user }}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </q-item>
    </q-list>

    <!-- 大图查看对话框 -->
    <q-dialog
      v-model="showImageViewer"
      maximized
    >
      <q-card>
        <q-card-section class="row items-center q-pb-none">
          <q-space />
          <q-btn
            v-close-popup
            icon="close"
            flat
            round
            dense
          />
        </q-card-section>

        <q-card-section
          horizontal
          class="justify-center items-center content-center"
        >
          <q-img
            :src="currentImage"
            contain
            position="center"
            style="max-width: 100vw; max-height: 100vh;"
            @click="showImageViewer = false"
          />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import {
  defineComponent, ref, computed, onMounted,
} from 'vue';
import medium from 'src/api/medium.js';
import { useQuasar } from 'quasar';

export default defineComponent({
  name: 'Medium',

  setup() {
    const $q = useQuasar();
    const searchResults = ref([]);
    const limitedResults = computed(() => searchResults.value.slice(0, 20));
    const isLoading = ref(false);
    // 页面加载时请求数据
    const fetchData = async () => {
      isLoading.value = true;

      try {
        const response = await medium.getImage();
        searchResults.value = response.data.data;
      } catch (error) {
        $q.notify({
          type: 'negative',
          message: '搜索失败，请稍后重试',
        });
      } finally {
        isLoading.value = false;
      }
    };
    // 在组件挂载时调用 fetchData
    onMounted(() => {
      fetchData();
    });
    // 对话框状态
    const showImageViewer = ref(false);
    const currentImage = ref('');
    // 方法：打开图片查看器
    const openImageViewer = (imageUrl) => {
      currentImage.value = imageUrl;
      showImageViewer.value = true;
    };
    return {
      isLoading,
      fetchData,
      limitedResults,
      showImageViewer, // 添加新的对话框状态
      currentImage, // 当前查看的大图URL
      openImageViewer, // 打开图片查看器的方法
    };
  },
});
</script>
<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 250px
.my-img
  width: 100%
  max-width: 300px
  max-height: 300px
</style>
